<template>
	<div class="lunb">
		<div class="swiper lunb-swiper">
			<ul class="swiper-wrapper">
				<li class="swiper-slide" v-for="item in list" :key='item.id'>
					<img :src="item.imgURL" />
				</li>
			</ul>
			<div class="swiper-pagination"></div>
		</div>
	</div>
</template>
<img src="../../../assets/prituce/swiper1.jpeg" />
<script>
	
	import {onMounted} from 'vue';
	
	import Swiper,{
			 Autoplay,
			 EffectCoverflow,
			 EffectCube,
			 Pagination,
	} from 'swiper';
	
	 Swiper.use([ Autoplay, EffectCoverflow, EffectCube, Pagination,])
	
	
	export default{
		name:'Lunb',
		data(){
			return{
				list:[
					{id:1,imgURL:require('../../../assets/prituce/swiper1.jpeg') },
					{id:2,imgURL:require('../../../assets/prituce/swiper2.jpeg')},
					{id:3,imgURL:require('../../../assets/prituce/swiper3.jpeg')},
				],
			}
		},
		setup(){
				onMounted(()=>{
					new Swiper('.lunb-swiper',{
						loop:true,
						pagination:{
							el:'.swiper-pagination'
						},
						autoplay:{
							delay:3000,
							stopOnlastSlide:false,
							disableOnInteraction:false,
						}
					})
				})
			}
		}
</script>

<style scoped>
	.lunb-swiper{
		width: 95%;
		height: 5.6rem;
	}
	.lunb-swiper img{
		width: 100%;
		height: 100%;
		border-radius: 0.2rem;
	}
</style>
